<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>

    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/blog_list.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
   
    <div class="nav">
        <img src="./image/logo2.jpg" alt="">
        <div class="title">我的博客系统</div> 
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>

    <div class="container">
        <div class="container-left">
            <div class="card">
                <img src="./image/kun.jpg" alt="">
                <h3></h3>
                <a href="https://www.github.com">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>

        <div class="container-right">
           <!-- <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2023-05-11 20:00:00</div>
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis repellendus voluptatum, reiciendis rem consectetur incidunt aspernatur eveniet excepturi magni quis sint, provident est at et pariatur dolorem aliquid fugit voluptatem.
                </div>
                <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt; </a>
            </div>  -->
        </div>
    </div>

    <script src="./js/app.js"></script>
    <script>
        function getBlogs(){
            $.ajax({
                type:'get',
                url:'blog',//相对路径
                success:function(body){
                    //1)querySelector：获取页面已有元素
                    //2)createElement：创建新的元素
                    //3).innerHTML：设置元素的内容
                    //4).className：设置元素的class属性
                    //5).appendChild：把一个元素添加到另一个元素的末尾

                    let containerDiv=document.querySelector('.container-right');
                    //服务器成功响应后调用的函数
                    //TODO 根据返回的响应数据构造页面响应的片段
                    for(let i=0;i<body.length;i++){
                        let blog=body[i];
                        //body得到的是一个数组，blog就是一个形如{blogId:1,title:"这是标题"...}的对象
                        
                        let blogDiv=document.createElement('div');
                        blogDiv.className='blog';  
                      
                        let titleDiv=document.createElement('div');
                        titleDiv.className='title';
                        titleDiv.innerHTML=blog.title;
                       
                        let dateDiv=document.createElement('div');
                        dateDiv.className='date';
                        dateDiv.innerHTML=blog.postTime;
                        
                        let descDiv=document.createElement('div');
                        descDiv.className='desc';
                        descDiv.innerHTML=blog.content;
                        
                        let a=document.createElement("a");
                        a.innerHTML='查看全文 &gt;&gt;';
                        a.href='blog_detail.html?blogId='+blog.blogId;
   
                        blogDiv.appendChild(titleDiv);
                        blogDiv.appendChild(dateDiv);
                        blogDiv.appendChild(descDiv);
                        blogDiv.appendChild(a);
                        containerDiv.appendChild(blogDiv);
                    }
                }
            });
        }
        
        getBlogs();

        //判断当前用户是否为已登录状态
        getLoginStatus();

        // 获取当前登录的用户信息
        function getUserInfo() {
            $.ajax({
                type: 'get',
                url: 'userInfo',
                success: function(user) {
                    // 把拿到的响应数据, 取出其中的 username, 设置到页面的 h3 标签中!
                    let h3 = document.querySelector('.card h3');
                    h3.innerHTML = user.username;
                }
            });
        }
        getUserInfo();
    </script>
</body>
</html>